<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-17 16:47:40
 * @LastEditors: william
 * @LastEditTime: 2025-09-11 15:52:24
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="1100px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '80px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col v-if="type == 'edit'" :span="24">
          <el-form-item label="订单号">
            <TextInput
              v-model="formData.orderNo"
              placeholder="订单号"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <!-- <BaseSelect
              v-model="formData.type"
              :options="g_options.costItemTypeOptions"
              label="类型"
            /> -->
            <TextInput v-model="formData.type" placeholder="类型" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <BaseSelect
              v-model="formData.status"
              :options="g_options.routeOrderStatusOptions"
              label="状态"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售" prop="sale">
            <TextInput v-model="formData.sale" label="销售" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="customerId">
            <SelectCustomer
              v-model="formData.customerId"
              :label="$t('fleet.customerName')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出发城市" prop="startRegionCode">
            <CascaderArea
              v-model="formData.startRegionCode"
              style="width: 100%"
              label="出发城市"
              :level="2"
              @change="handleRegionChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="占位" prop="occupySeat">
            <BaseSelect
              v-model="formData.occupySeat"
              :options="g_options.placeholderOptions"
              label="占位"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人数" prop="personNum">
            <TextInput
              v-model="formData.personNum"
              :options="g_options.tourDateStatusOptions"
              label="人数"
              verify-type="nzint"
              :maxlength="4"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总金额" prop="totalPrice">
            <TextInput
              v-model="formData.totalPrice"
              :options="g_options.tourDateStatusOptions"
              label="总金额"
              verify-type="float"
              :maxlength="10"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单价" prop="price">
            <TextInput
              v-model="formData.price"
              :options="g_options.tourDateStatusOptions"
              label="单价"
              verify-type="float"
              :maxlength="10"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="汇率" prop="exRate">
            <TextInput
              v-model="formData.exRate"
              :options="g_options.tourDateStatusOptions"
              label="汇率"
              verify-type="float"
              :maxlength="4"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  },
  row: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() => (props.type === 'add' ? '新建账单' : '编辑账单'))

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  type: '',
  status: '',
  sale: '',
  customerId: '',
  startRegionCode: '',
  startLocation: {
    lng: '',
    lat: ''
  },
  occupySeat: '',
  personNum: '',
  totalPrice: '',
  price: '',
  exRate: ''
})
const rules = {
  type: g_rules.commonInputText('类型'),
  status: g_rules.selectRule('状态'),
  sale: g_rules.commonInputText('销售'),
  customerId: g_rules.selectRule('客户名称'),
  startRegionCode: g_rules.selectRule('出发城市'),
  occupySeat: g_rules.selectRule('占位'),
  personNum: g_rules.personCount,
  totalPrice: g_rules.amount2,
  price: g_rules.unitPrice,
  exRate: g_rules.exchangeRate({})
}

onMounted(() => {
  if (props.type === 'edit') {
    g_utils.assignFormData(formData.value, props.row)
    props.row.id && (formData.value.id = props.row.id)
    props.row.orderNo && (formData.value.orderNo = props.row.orderNo)
    console.log('formData.value', formData.value, props.row)
  }
})

const handleRegionChange = data => {
  // console.log('handleRegionChange', data)
  formData.value.startRegionCode = data.lastCode
  g_utils.getAMapLocation(data.text).then(data => {
    formData.value.startLocation = data
  })
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.travelAgency.apiTeamSeatOrderCreate
        : g_api.travelAgency.apiTeamSeatOrderUpdate
    urlMethod({
      ...formData.value,
      teamId: props.id
    })
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
